<template>
	<view>
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular 
				:current="index"
				:indicator-dots="indicatorDots" 
				:autoplay="autoplay" 
				:interval="interval" 
				:duration="duration"
				indicator-color="#E9E7E7"
				indicator-active-color="#FF9029"
				@change="changeSwiper">
				<block v-for="(item, index) in list" :key="index">
					<swiper-item class="swiper-item">
						<image :src="item.img" mode=""></image>
					</swiper-item>
				</block>
			</swiper>
		</view>

		</view>
	</view>
</template>
<script>
	export default {
		props: {
			list: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 5000,
				duration: 500,
				index: 0
			}
		},
		methods: {
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.detail.value
			},
			durationChange(e) {
				this.duration = e.detail.value
			},
			changeSwiper(e) {
				// console.log(e.detail.current,'ddddddddd')
			}
		}
	}
</script>

<style scoped lang="less">
	.uni-margin-wrap {
		width: 100%;
		.swiper {
			height: 316rpx;
			.swiper-item {
				display: block;
				height: 316rpx;
				text-align: center;
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	::v-deep .uni-margin-wrap .uni-swiper-dot {
		width: 12rpx;
		height: 12rpx;
	}
	::v-deep .uni-margin-wrap .uni-swiper-dot-active {
		width: 24rpx;
		border-radius: 12rpx;
	}
	
</style>
